<template>
  <div id="box" @click="changeMode">
    <el-icon size="25" class="icon">
      <Service v-show="props.mode == 'Chat'" />
      <EditPen v-show="props.mode == 'Picture'" />
      <Unlock v-show="props.mode == 'ChangePassword'" />
      <CircleClose v-show="props.mode == 'LogOut'" />
      <Avatar v-show="props.mode == 'Administrator'" />
    </el-icon>
    {{ props.placeholder }}
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import pinia from "../../store";
import { pageStore } from "../../store/ChatPage";
import router from "../../router";
import { ElMessage, ElMessageBox } from "element-plus";
import { LogOut } from "../../api/api";

const pagestore = pageStore(pinia);
const props = defineProps({
  mode: String,
  placeholder: String,
});

function changeMode() {
  switch (props.mode) {
    case "Chat":
      pagestore.updateMode("Chat");
      break;
    case "Picture":
      // pagestore.updateMode("Picture");
      break;
    case "ChangePassword":
      router.push("/ChangePassword");
      break;
    case "LogOut":
      _LogOut();
      break;
    case "Administrator":
      toAdmini();
      break;
  }
}

async function toAdmini() {
  const isLeave = await router.push("/Administrator");

  if (isLeave) {
    ElMessage.error("You are NOT ADMINISTRATOR");
  } else {
    ElMessage.success("WELCOME");
  }
}

async function _LogOut() {
  ElMessageBox({
    autofocus: false,
    title: "LogOut",
    message: "Are you sure to LogOut?",
    type: "warning",
    customClass: 'ElMessageBox',
    confirmButtonClass: 'ElMessageBoxButton',
  }).then(() => {
    LogOut();
    router.push("/Login");
  }).catch(() => {
    ElMessage.info("You have canceled LogOut");
  });
}
</script>

<style scope>
#box {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

.icon {
  width: 10%;
  height: 100%;
  margin-right: 30px;
}

#box:hover {
  color: var(--right-yellow);
}

#box:active {
  color: #fff;
}

.ElMessageBox {
  background-color: var(--left-black);
  border: 1px solid gray;
}

.ElMessageBoxButton {
  background-color: rgb(230, 162, 60);
  color: white;
  border: 1px solid white;
}

.ElMessageBoxButton:hover {
  background-color: var(--right-yellow);
  color: white;
  border: 1px solid white;
}

.el-message-box__content {
  color: white;
}
</style>